<%--
  Created by IntelliJ IDEA.
  User: luoxinmin
  Date: 2020/9/11
  Time: 9:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
</head>
<body>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>

<%=request.getContextPath()%><br>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <table class="table">
                <tr>
                    <td>id</td>
                    <td>name</td>
                    <td>sex</td>
                    <td>pass</td>
                    <td>birth</td>
                    <td>department</td>
                    <td>address</td>
                    <td></td>
                </tr>
                <c:forEach items="${slist.list}" var="student">
                    <tr>
                        <td>${student.id}</td>
                        <td>${student.name}</td>
                        <td>${student.sex}</td>
                        <td>${student.pass}</td>
                        <td>${student.birth}</td>
                        <td>${student.department}</td>
                        <td>${student.address}</td>
                        <td><a href="/student/del/${student.id}">del</a> | <a class="upstu"
                                                                              href="/student/one/${student.id}"
                                                                              data-toggle="modal"
                                                                              data-target="#myModal">update</a></td>
                    </tr>
                </c:forEach>
            </table>
        </div>
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <c:forEach begin="${slist.navigateFirstPage}" end="${slist.navigateLastPage}" step="1" var="p">
                            <li><a href="/student/all2/${p}">${p}</a></li>
                        </c:forEach>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>

                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $(".upstu").each(function () {
            $(this).click(function () {
                var urls = $(this).attr("href");
                //获取数据
                $.ajax({
                    url: urls,
                    type: 'get',
                    dataType: 'json',
                    success: function (data) {
                        $("#name").val(data.name);
                        $("#pass").val(data.pass);
                        $("#birth").val(data.birth);//yyyy-MM-dd
                        $("#department").val(data.department);
                        $("#address").val(data.address);
                    }
                });
                //打开模态
                $('#myModal').modal();
                return false;
            });
        });

        $("#btn").click(function () {
            //$("#frm ").submit(function () {
            //alert($("#frm").serialize());
            // return false;
            // });
            var vals="/student/update?"+$("#frm").serialize();
            $.ajax({
                url:vals,
                type:'post',
                dataType:'json',
                success:function (res) {
                    alert(res.code);
                }
            })
        });
    })
</script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">修改</h4>
            </div>
            <div class="modal-body">
                <form id="frm" class="form-horizontal">
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">name:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="name" name="name" placeholder="用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">pass:</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="pass" name="pass" placeholder="密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-sm-2 control-label">Password</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="password" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别:</label>
                        <div class="col-sm-10">
                            <input type="radio" name="sex"/>男
                            <input type="radio" name="sex"/>女
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="birth" class="col-sm-2 control-label">生日:</label>
                        <div class="col-sm-10">
                            <input type="date" class="form-control" id="birth" name="birth"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="department" class="col-sm-2 control-label">department:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="department" name="department"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="address" class="col-sm-2 control-label">address:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="address" name="address"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox"> Remember me
                                </label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id="btn" type="button" class="btn btn-primary"  data-dismiss="modal">Save changes</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
